<template>
    <div class="student">
        <h2>学生信息</h2>
        <form>
            <!-- 第一行 -->
            <p>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" v-model="name"></td>
                </tr>
            </p>
            <!-- 第二行 -->
            <p>
                <tr>
                    <td>年龄：</td>
                    <td><input type="text" v-model="age"></td>
                </tr>
            </p>
            <!-- 第三行 -->
            <p>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" id="nan" v-model="sex" value="男"><label for="nan"><img src="./image/man.png"
                                width="20"> 男</label>
                        <input type="radio" name="sex" id="nv" v-model="sex" value="女"><label for="nv"><img src="./image/woman.png" width="20">
                            女</label>
                    </td>
                </tr>
            </p>
            <!-- 第四行 -->
            <p>
                <tr>
                    <td>爱好：</td>
                    <td>
                        <input type="checkbox" name="hobby" id="pingpongqiu" v-model="isChecked1"><label for="pingpongqiu">打乒乓球</label>
                        <input type="checkbox" name="hobby" id="yumaoqiu" v-model="isChecked2"><label for="yumaoqiu">打羽毛球</label>
                        <input type="checkbox" name="hobby" id="lanqiu" v-model="isChecked3"><label for="lanqiu">打篮球</label>
                        <input type="checkbox" name="hobby" id="huaxue" v-model="isChecked4"><label for="huaxue">滑雪</label>
                    </td>
                </tr>
            </p>
            <!-- 第五行 -->
            <p>
                <tr>
                    <td>所属院校：</td>
                    <td>
                        <select v-model="school">
                            <option>湖北工业大学</option>
                            <option>武汉大学</option>
                            <option>华中科技大学</option>
                            <option>武汉工程大学</option>
                        </select>
                    </td>
                </tr>
            </p>
            <!-- 第六行 -->
            <p>
                <tr>
                    <td>
                        <button type="button" @click="displayStudents()">导入信息</button>
                    </td>
                    <td>
                        <input type="reset" value="重新填写" @click="init">
                    </td>
                </tr>
            </p>
            <!-- 第七行 -->
            <p>
                <input v-model="condition">
                <select v-model="ct">
                    <option>姓名</option>
                    <option>年龄</option>
                    <option>性别</option>
                    <option>学校</option>
                </select>
                <button type="button" @click="find">查询</button>
            </p>
        </form>
        <h2>信息列表</h2>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>姓名<button @click="ns">{{ namesort }}</button></th>
                    <th>年龄<button @click="as">{{ agesort }}</button></th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>所属院校</th>
                    <th>功能</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(stu,index) in studentsList" :key="index">
                    <td>{{ stu.name }}</td>
                    <td>{{ stu.age }}</td>
                    <td>{{ stu.sex }}</td>
                    <td>{{ stu.hobby.join("、") }}</td>
                    <td>{{ stu.school }}</td>
                    <td>
                        <button @click="de(index)">删除</button>
                        <button @click="update(index)">修改</button>
                    </td>
                </tr><br>
                <!-- 分页组件 -->
                <div class="block">
                    <el-pagination
                        :page-sizes="[5, 10, 15, 20]"
                        :background=true
                        layout="total,sizes, prev, pager, next"
                        :total=t
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div><br>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts" name="Student">
import axios from 'axios'
import {ref,reactive} from "vue"
import { useRouter } from 'vue-router';

const router = useRouter();

//按名字排序
let namesort=ref();
namesort.value="升序";
let nsn=ref();
nsn.value=1;
//按年龄排序
let agesort=ref();
agesort.value="升序";
let asn=ref();
asn.value=1;
//查询条件
let condition:string="";
//查询类型：condition-type
let ct:string="姓名";
//总条数：total
let t=ref();
t.value=0;
//当前页数：current-page
let cp=ref();
cp.value=1;
//当前页条数：current-page-number
let cpn=ref();
cpn.value=10;
let studentsList: Student[]=reactive([]);
    // axios.get('http://localhost:3000/api/getdata')
    // .then((response) => {
    //   // 请求成功，将返回的数据显示在页面上
    // Object.assign(studentsList,response.data.message);
    // //   for (let i = 0; i < studentsList.length; i++) {
    // //     console.log(studentsList[i]);
    // //   }
    // })
    find();
    // // 等待一段时间（模拟异步操作的延迟）
    // setTimeout(async () => {
    //     console.log("1.",t.value);
    // }, 500); // 等待1秒后再查询
    //数据
    let name:string;
    let age:number;
    let sex:string;
    let hobby:string[];
    let school:string="湖北工业大学";
    let isChecked1:false;
    let isChecked2:false;
    let isChecked3:false;
    let isChecked4:false;
    class Student{
        name: string;
        age: number;
        sex: string;
        hobby: string[];
        school: string;

        constructor(name: string,age: number,sex: string,hobby: string[],school: string){
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.hobby=hobby;
            this.school=school;
        }
    }
    //方法
    function ns()
    {
        if(namesort.value=="升序")
        {
            namesort.value="降序";
            nsn.value=-1;
        }
        else
        {
            namesort.value="升序";
            nsn.value=1;
        }
        find();
    }
    function as()
    {
        if(agesort.value=="升序")
        {
            agesort.value="降序";
            asn.value=-1;
        }
        else
        {
            agesort.value="升序";
            asn.value=1;
        }
        find();
    }
    function update(index:number){
        router.push({
            name:'update',
            query:{
                name:studentsList[index].name,
                age:studentsList[index].age,
                sex:studentsList[index].sex,
                hobby:studentsList[index].hobby,
                school:studentsList[index].school
            }
        });
    }
    function handleSizeChange(val){
        // console.log(`当前页条数: ${val}`);
        cpn.value=val;
        // console.log(cpn.value);
        find();
    }
    function handleCurrentChange(val){
        // console.log(`当前页: ${val}`);
        cp.value=val;
        // console.log("1.",cp.value);
        find();
    }
    function displayStudents(){
        let f=check();
        if(f==1)
            return;
        //每次进行操作前将数组清空
        hobby=[];
        if(isChecked1)
            hobby.push("打乒乓球");
        if(isChecked2)
            hobby.push("打羽毛球");
        if(isChecked3)
            hobby.push("打篮球");
        if(isChecked4)
            hobby.push("滑雪");
        if(!isChecked1&&!isChecked2&&!isChecked3&&!isChecked4)
            hobby.push("无");
        const student =new Student(name,age,sex,hobby,school);
        // if(condition==""||condition==name)
        //     studentsList.push(student);
        axios.post('http://localhost:3000/api/adddata',{
            data:student
        });
        find();
    }
    function init(){
        condition="";
        name="";
        age=NaN;
        sex="";
        school="湖北工业大学";
        isChecked1=false;
        isChecked2=false;
        isChecked3=false;
        isChecked4=false;
        // axios.get('http://localhost:3000/api/getdata')
        // .then((response) => {
        //     // 请求成功，将返回的数据显示在页面上
        //     Object.assign(studentsList,response.data.message);
        //     // for (let i = 0; i < studentsList.length; i++) {
        //     //     console.log(studentsList[i]);
        //     // }
        // })
        find();
    }
    const de = (index: number) => {
        // console.log(studentsList[index])
        axios.post('http://localhost:3000/api/deldata',{
            data:studentsList[index]
        })
        // studentsList.splice(index, 1);
        find();
    };
    function check(): number{
        if(name==undefined||name=="")
        {
            alert("姓名不能为空");
            return 1;
        }
        if(age==undefined||Number.isNaN(age))
        {
            alert("年龄不能为空");
            return 1;
        }
        if(age<0||age>150)
        {
            alert("年龄必须在0-150岁之间");
            return 1;
        }
        if(sex==undefined||sex=="")
        {
            alert("性别不能为空");
            return 1;
        }
        return 0;
    }
    function find(){
        // console.log(ct);
        // console.log(condition);
        // console.log("2.",cp.value);
        studentsList.length=0;
        if(condition=="")
        {
            // console.log("haha");
            axios.get('http://localhost:3000/api/gettotal')
            .then((response)=>{
                t.value=response.data.message;
                // console.log(response.data.message);
                // console.log("2.",t.value);
            })
            axios.post('http://localhost:3000/api/getdata',{
                data:cp.value,
                data1:cpn.value,
                ns:nsn.value,
                as:asn.value
            })
            .then((response) => {
            // 请求成功，将返回的数据显示在页面上
                Object.assign(studentsList,response.data.message);
                // for (let i = 0; i < studentsList.length; i++) {
                //     console.log(studentsList[i]);
                // }
            })
        }
        else
        {
            // console.log("hehe");
            axios.post('http://localhost:3000/api/gettotal1',{
                data:condition,
                type:ct
            })
            .then((response) => {
                t.value=response.data.message;
            })
            axios.post('http://localhost:3000/api/getdata1',{
                param1:condition,
                param2:cp.value,
                param3:cpn.value,
                ns:nsn.value,
                as:asn.value,
                type:ct
            })
            .then((response) => {
                // 请求成功，将返回的数据显示在页面上
                // console.log(response.data.message);
                Object.assign(studentsList,response.data.message);
                // for (let i = 0; i < studentsList.length; i++) {
                //     console.log(studentsList[i]);
                // }
            })
        }
    }
</script>


<style></style>